<template>
  <div class="flex gap-3 justify-between w-full mt-3">
    <div ref="bpChat" class="w-[384px] h-[280px]"></div>
    <div class="flex flex-col gap-2 w-[50%]">
      <div class="textBgItem">
        <span class="text-[12px] text-[#d3d4d4]">测量时间</span>
        <div class="text-[16px] font-[Bebas]">
          {{ standInfo.takeTime }}
        </div>
      </div>
      <div class="textBgItem">
        <span class="text-[12px] text-[#d3d4d4]">实时血压(mmHg)</span>
        <div
          class="text-[16px] font-[Bebas]"
          :style="{
            color:
              standInfo?.ssxyL > standInfo?.sbpMaxNum || standInfo?.ssxyR < standInfo?.dbp?.min
                ? 'red'
                : '#fff'
          }"
        >
          <span>{{ standInfo?.ssxyL }}</span
          >/
          <span>{{ standInfo?.ssxyR }}</span>
        </div>
      </div>
      <div class="textBgItem">
        <span class="text-[12px] text-[#d3d4d4]">脉搏(bpm)</span>
        <div
          v-if="heartRateBox?.length > 0"
          class="text-[16px] font-[Bebas]"
          :style="{ color: +heartRateBox[0] > +standInfo?.heartMaxNum ? 'red' : '#fff' }"
        >
          {{ heartRateBox[0] || 0 }}
          {{}}
        </div>
      </div>
      <div class="textBgItem">
        <span class="text-[12px] text-[#d3d4d4]">最大收缩压</span>
        <div class="text-[16px] font-[Bebas]">
          {{ standInfo?.sbpMax || 0 }}
        </div>
      </div>
      <div class="textBgItem">
        <span class="text-[12px] text-[#d3d4d4]">最小收缩压</span>
        <div class="text-[16px] font-[Bebas]">{{ standInfo?.sbpMin || 0 }}</div>
      </div>
      <div class="textBgItem">
        <span class="text-[12px] text-[#d3d4d4]">最大舒张压</span>
        <div class="text-[16px] font-[Bebas]">{{ standInfo?.dbpMax || 0 }}</div>
      </div>
      <div class="textBgItem">
        <span class="text-[12px] text-[#d3d4d4]">最小舒张压</span>
        <div class="text-[16px] font-[Bebas]">{{ standInfo?.dbpMin || 0 }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getDeviceData, getDeviceStandard } from '@/api/home'
import * as echarts from 'echarts'
import { dayjs } from 'element-plus'
import { markRaw, nextTick, onMounted, ref } from 'vue'
const { familyId } = defineProps<{
  familyId: number
}>()
const bpChat = ref(null)
const myChart = ref()
const option = ref<echarts.EChartsOption>({
  animation: false,
  xAxis: {
    type: 'category',
    data: [],
    boundaryGap: false,
    axisLabel: {
      //坐标轴刻度标签
      show: false
    },
    axisLine: {
      //坐标轴轴线
      show: false
    },
    axisTick: {
      //坐标轴刻度
      show: false
    }
  },
  yAxis: {
    name: '     单位：mmHg',
    type: 'value',
    min: 0,
    axisLabel: {
      //坐标轴刻度标签
      show: false
    },
    axisLine: {
      //坐标轴轴线
      show: false
    },
    axisTick: {
      //坐标轴刻度
      show: false
    },
    max: 220,
    splitLine: {
      //坐标轴在grid区域中的分割线
      show: false
      // lineStyle: {
      //   color: '#51586c',
      //   type: 'dashed'
      // }
    }
  },
  grid: {
    left: 0,
    right: 0,
    bottom: 0,
    top: 30,
    containLabel: true //是否包含坐标值
  },
  legend: {
    data: ['收缩压', '舒张压'],
    right: '1%',
    top: 0
  },
  tooltip: {
    trigger: 'axis'
  },
  series: [
    {
      itemStyle: {
        color: function (param: any) {
          if (param.value > standInfo.value?.sbpMaxNum) {
            return 'red'
          } else {
            return '#00FFC1'
          }
        }
      },
      data: [],
      type: 'line',
      name: '收缩压',
      symbol: 'circle',
      markLine: {
        symbol: 'none',
        data: [
          {
            yAxis: 0,
            lineStyle: {
              color: 'yellow',
              type: 'dashed',
              width: 1
            },
            label: {
              show: false
            }
          },
          {
            yAxis: 0,
            lineStyle: {
              color: 'yellow',
              type: 'dashed',
              width: 1
            },
            label: {
              show: false
            }
          }
        ]
      },
      smooth: true,
      color: '#48d4b6'
    },
    {
      itemStyle: {
        color: function (param: any) {
          if (param.value > standInfo.value?.dbpMinNum) {
            return 'red'
          } else {
            return '#7DB9FF'
          }
        }
      },
      data: [],
      type: 'line',
      symbol: 'circle',
      name: '舒张压',
      smooth: true,
      color: '#3190fd'
    }
  ]
})
onMounted(() => {
  myChart.value = markRaw(echarts.init(bpChat.value))
  nextTick(() => {
    initEchart()
  })
})
const standInfo = ref<any>({
  ssxyL: '',
  ssxyR: '',
  sbpMax: '',
  sbpMin: '',
  dbpMax: '',
  dbpMin: '',
  sbpMaxNum: '',
  dbpMinNum: '',
  heartMaxNum: '',
  takeTime: ''
})
const heartRateBox = ref()
const initEchart = async () => {
  const res: any = await getDeviceData({ familyId, deviceType: '2' })
  let dateBox: string[] = []
  let sbpBox: number[] = []
  let dbpBox: number[] = []
  let hrBox: number[] = []
  res.data.forEach((item: any) => {
    dateBox.unshift(dayjs(item.takeTime).format('MM/DD HH:mm'))
    dbpBox.unshift(item.diastole)
    sbpBox.unshift(item.shrink)
    hrBox.push(item.heartRate)
  })
  let obj: any = option.value
  obj.xAxis.data = dateBox as never
  obj.series[0].data = sbpBox as never
  obj.series[1].data = dbpBox as never
  heartRateBox.value = hrBox
  const res1 = await getDeviceStandard({ familyId, deviceType: '2' })
  standInfo.value = res1?.data
  standInfo.value.sbpMaxNum = +res1?.data?.sbp?.max || 0
  standInfo.value.dbpMinNum = +res1?.data?.dbp?.max || 0
  standInfo.value.heartMaxNum = +res1?.data?.heart_rate?.max || 0
  if (sbpBox.length > 0) {
    standInfo.value.sbpMax = Math.max(...sbpBox)
    standInfo.value.sbpMin = Math.min(...sbpBox)
  }
  if (dbpBox.length > 0) {
    standInfo.value.dbpMax = Math.max(...dbpBox)
    standInfo.value.dbpMin = Math.min(...dbpBox)
  }

  standInfo.value.ssxyL = sbpBox[sbpBox.length - 1] || 0
  standInfo.value.ssxyR = dbpBox[dbpBox.length - 1] || 0
  obj.series[0].markLine.data[0].yAxis = standInfo.value?.sbp?.max || 0
  obj.series[0].markLine.data[1].yAxis = standInfo.value?.dbp?.max || 0
  myChart.value.setOption(option.value, true)
  standInfo.value.takeTime = res.data[0].takeTime
  window.onresize = function () {
    myChart.value.resize()
  }
}
</script>

<style scoped lang="less"></style>
